<template>
  <el-card class="box-card">
    <div slot="header">
      <div class="header">
        <span>卡片名称</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="width: 100px">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :span="12">
        <LineCharts></LineCharts>
      </el-col>
      <el-col :span="12">
        <LineCharts></LineCharts>
      </el-col>
    </el-row>
    <el-table border :data="data" style="width: 100%">
      <el-table-column
        prop="date"
        label="排名"
        width="80"
        type="index"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="name" label="搜索关键字" width="180">
      </el-table-column>
      <el-table-column prop="address" label="用户数" sortable>
      </el-table-column>
      <el-table-column
        prop="address2"
        label="周涨幅"
        sortable
      ></el-table-column>
    </el-table>
    <el-pagination
      :page-size="20"
      :pager-count="11" 
      layout="prev, pager, next"
      :total="1000"
      style="text-align:right"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import LineCharts from "@/views/dashboard/Observe/LineCharts";
export default {
  components: { LineCharts },
  data() {
    return {
      data: [],
    };
  },
};
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
</style>
